<template>
    <div class="container">
        <div class="row">
            <h1>当前求和为：{{$store.state.sum}}</h1>
            <h1>当前求和放大10倍：{{$store.state.sum*10}}</h1>
            <h1>当前求和放大10倍：{{$store.getters.bigSum}}</h1>
            <h1>我在{{$store.state.school}},学习{{$store.state.subjects}}</h1>
            <hr>
            <h1>当前求和为：{{sum}}</h1>
            <h1>当前求和放大10倍：{{sum*10}}</h1>
            <h1>当前求和放大10倍：{{bigSum}}</h1>
            <h1>我在{{school}},学习{{subjects}}</h1>
            <select v-model.number="n"> <!-- .number 强制数字转换-->
                <option value='1'>1</option>
                <option value='2'>2</option>
                <option value='3'>3</option>
            </select>
            <button @click="increment">+</button>
            <button @click="decrement">-</button>
            <button @click="incrementOdd">当前求和为奇数再加</button>
            <button @click="incrementWait">等一等再加</button>
        </div>
    </div>
</template>
<script>
import {mapGetters, mapState} from "vuex";
export default {
    name: "Count",
    data(){
        return {
            n: 1
        }
    },
    methods:{
        increment(){
            // this.sum = this.sum+this.n;
            // this.$store.dispatch('jia', this.n)
            this.$store.commit('JIA', this.n)
        },
        decrement(){
            // this.sum = this.sum-this.n;
            // this.$store.dispatch('jian', this.n)
            this.$store.commit('JIAN', this.n)
        },
        incrementOdd(){
            // if(this.$store.state.sum%2==1){
            //     // this.sum = this.sum+this.n;
            //     this.$store.dispatch('jia', this.n)
            // }

            this.$store.dispatch('jiaOdd', this.n)
        },
        incrementWait(){
            // setTimeout(()=>{
            //     // this.sum = this.sum+this.n;
            //     this.$store.dispatch('jia', this.n)
            // }, 500);

            this.$store.dispatch('jiaWait', this.n)
        }
    },
    computed:{
        // ...mapState({'sum':'sum',"bigSum":'bigSum',"school":'school',"subjects":'subjects'}),
        ...mapState(['sum',"bigSum",'school','subjects']),
        ...mapGetters(['bigSum'])
    }
}
</script>

<style>
.container{
    display: flex;
    justify-content: space-around;
}
</style>
